import { copyCode } from '@/common/utils';
import { CopyOutlined } from '@ant-design/icons';
import { Collapse, Row, Col, Button } from 'antd';
import { useEffect, useState } from 'react';
import CodeEditor from '../CodeEditor';
const { Panel } = Collapse;

const RenderJavaCode: React.FC<{ code: string, title: string, language: string }> = (props) => {

    const [code, setCode] = useState(() => props.code);

    useEffect(() => {
        setCode(props.code);
    }, [props.code])

    return <Collapse>

        <Panel key="java" header={
            <Row>
                <Col span={6}>{props.title}</Col>
                <Col span={18}>
                    <div style={{ textAlign: 'right' }}>
                        <Button onClick={(e) => copyCode(e, code)} icon={<CopyOutlined />}>复制</Button>
                    </div>
                </Col>
            </Row>}>
            <CodeEditor height={400} language={props.language} onChange={(value) => setCode(value)} value={code} />
        </Panel>
    </Collapse>
}

export default RenderJavaCode;